<script setup>
import  axios  from 'axios'
import { ElMessage } from 'element-plus';
import {ref,onMounted,watch} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import http from "../http"

const router = useRouter()
const route = useRoute()
let data =ref([])
let relosi = ref([])

const  getrelosi = () =>{
  http.get('/user/role/?sisbase=1').then(res=>{
    relosi.value = res.data
    console.log(relosi.value)
  }).catch(err=>{
    console.log(err)
  })
}


onMounted(() => {

  http.get('/user/ziyuan/').then(res=>{
    // console.log(res)
    data.value = res.data
  }).catch(err=>{
    console.log(err)
  })
  getrelosi()


})




const form = ref({
  // 新增角色名称
  name: '',
  // 基础角色id
  region: '',
  // 资源id
  type: [],

})

const onSubmit = () => {
  console.log(form.value)
  // 先判断name是否为空,资源是否为空
  if(form.value.name === '' || form.value.type.length === 0){
    ElMessage.error("请输入角色名称和选择资源")
  }else{
    http.post('/user/addroles/',form.value).then(res=>{
      console.log(res)

    })

  }
}

const unonSubmit = () => {
 form.value = {
   name: '',
   region: '',
   type: [],
 }
 // router.push({ path: '/roleadd' })
}




// 监听下拉选框的变化，并更新多选框的选中状态
watch(() => form.value.region, async (newVal) => {
  if (newVal) {
    console.log(newVal);
    try {
      // 假设你有一个方法可以根据region的值获取对应的type
      const types = await getCorrespondingTypes(newVal);
      form.value.type = types;
    } catch (error) {
      console.error(error);
      ElMessage.error("获取资源失败");
    }
  }
});

// 假设这是一个异步方法，根据region的值获取对应的type
const getCorrespondingTypes = async (regionId) => {
  console.log('regionId', regionId);
  try {
    const res = await http.get("/user/roleres/?sroleid=" + regionId);
    if (res && res.data && Array.isArray(res.data)) {
      // 提取resourceid
      return res.data.map(item => item.resourceid);
    } else {
      throw new Error("Unexpected data structure or no data received");
    }
  } catch (err) {
    console.error(err);
    throw err; // 重新抛出错误，以便在调用处处理
  }
};

</script>

<template>


  <h1 class="form-title">Create</h1>
  <el-form :model="form" class="form-container">
    <el-form-item label="新增角色名称"  class="form-item">
      <el-input v-model="form.name" placeholder="please select your name" style="margin-left:50px;width: 450px; "/>
    </el-form-item>

    <el-form-item label="继承角色名称">
    <el-select v-model="form.region" placeholder="please select your zone" style="margin-left:52px;width: 450px;" class="select-width input-common">
      <el-option
          v-for="item in relosi"
          :key="item.value"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
      </el-form-item>

    <el-form-item label="资源选择">
      <el-checkbox-group v-model="form.type" class="checkbox-group">
        <el-checkbox
            v-for="item in data"
            :key="item.id"
            :value="item.id"
            :name="item.name + item.level"
            style="margin-left:40px;"
             class="el-checkbox"

        >
          {{ item.name }} - Level {{ item.level }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit" class="button-primary">Create</el-button>
      <el-button class="button-cancel"  @click="unonSubmit" >Cancel</el-button>
    </el-form-item>
  </el-form>


</template>

<style scoped>
/* 标题样式 */
h1 {
  color: #333; /* 标题颜色 */
  font-size: 24px; /* 标题字体大小 */
  margin-bottom: 20px; /* 标题与表单的间距 */
  margin-left: 20px;
}

/* 表单容器样式 */
.form-container {
  max-width: 500px; /* 表单最大宽度 */

  padding: 20px; /* 表单内边距 */
  background-color: #fff; /* 表单背景色 */
  border-radius: 8px; /* 表单圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 表单阴影 */
}


.form-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 24px;
}



.select-width {
  width: 100%; /* 选择框宽度 */
}

/* 输入框和选择框的公共样式 */
.input-common {
  margin-left: 30px;
}

/* 聚焦样式 */
.input-common:focus {
  outline: none;
  border-color: #409eff;
}

/* 悬停样式 */
.input-common:hover {
  border-color: #409eff;
}

/* 占位符样式 */
.input-common::placeholder {
  color: #c0c4cc;
}



.checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Display in 3 columns */
  gap: 10px; /* Space between checkboxes */
}
/* 定义复选框组的布局样式 */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 以三列显示 */
  gap: 10px; /* 项目之间的间距 */
  margin-left: 40px; /* 整体偏移 */
}

/* 定义复选框的样式 */
.el-checkbox {
  display: flex;
  align-items: center; /* 垂直居中 */
  font-size: 14px; /* 字体大小 */
}

/* 定义复选框标签的样式 */
.el-checkbox__label {
  margin-left: 8px; /* 标签与复选框之间的间距 */
}

/* 自定义悬停效果 */
.el-checkbox:hover {
  background-color: #f5f7fa; /* 悬停时的背景色 */
}

/* 自定义选中效果 */
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409EFF; /* 选中时的文字颜色 */
}

/* 自定义禁用效果 */
.el-checkbox__input:disabled + .el-checkbox__label {
  color: #c0c4cc; /* 禁用时的文字颜色 */
}
.el-checkbox {
  display: flex;
  align-items: center; /* Vertically align the checkbox and label */
}


/* 定义按钮的基本样式 */
.button-primary {
  background-color: #409EFF;
  border-color: #409EFF;
  color: white;
  border-radius: 4px;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.button-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.5);
}

.button-primary:disabled {
  background-color: #cccccc;
  border-color: #cccccc;
}

.button-primary:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* 定义取消按钮的样式 */
.button-cancel {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}

.button-cancel:hover {
  background-color: #f0f0f0;
  border-color: #dcdcdc;
}

.button-cancel:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.button-cancel:disabled {
  background-color: #f5f5f5;
  border-color: #e0e0e0;
}

.button-cancel:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05);
}
</style>